<template>
  <van-popup
    :show="modelValue"
    @update:show="$emit('update:modelValue', $event)"
    position="bottom"
    :style="{ height: '80%' }"
    round
    class="red-packet-list"
  >
    <!-- Header -->
    <div class="header relative bg-gradient-to-r from-blue-500 to-cyan-500 p-4">
      <div class="flex items-center gap-3">
        <van-image
          round
          width="3rem"
          height="3rem"
          :src="userStore.user.headImage"
          fit="cover"
        />
        <div class="flex flex-col">
          <span class="text-white font-medium text-lg">{{
            userStore.user?.wechatName
          }}</span>
          <div class="flex items-center gap-1">
            <van-tag type="primary" size="medium">会员</van-tag>
          </div>
        </div>
      </div>
      <!-- Close button -->
      <van-button
        class="!absolute right-2 top-2"
        plain
        type="default"
        size="small"
        @click="handleClose"
      >
        关闭
      </van-button>
    </div>

    <!-- Content -->
    <div class="content p-4">
      <template v-if="redPackets.length === 0">
        <div class="flex justify-center items-center text-gray-400 mt-8">
          没有更多数据了
        </div>
      </template>
      <template v-else>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多数据了"
          @load="onLoad"
        >
          <div
            v-for="(item, index) in redPackets"
            :key="index"
            class="red-packet-item bg-white rounded-lg shadow-sm p-4 mb-3"
          >
            <div class="flex justify-between items-center">
              <div class="flex items-center gap-3">
                <div
                  class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center"
                >
                  <van-icon name="gold-coin-o" size="24" color="#ee0a24" />
                </div>
                <div class="flex flex-col">
                  <span class="text-lg font-medium">{{
                    redPacketTypeMap[item.type] || item.type
                  }}</span>
                  <span class="text-gray-500 text-sm">{{
                    item.gmtModified
                  }}</span>
                </div>
              </div>
              <div class="text-xl font-bold text-red-500">
                ¥{{ (item.amount / 100).toFixed(2) }}
              </div>
            </div>
          </div>
        </van-list>
      </template>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/useUserStore";
import { computed, ref, watch } from "vue";
import useLiveDataStore from "../stores/LiveDataStore";
import { getRedPacketList } from "../LiveNewApi";
const liveDataStore = useLiveDataStore();
const props = defineProps<{
  modelValue: boolean;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const redPacketTypeMap = {
  COMPLETED_RP: "播放红包",
  ANSWER_RP: "答题红包"
};

const userStore = useUserStore();
const userAvatar = ref(""); // Set default avatar or get from props
const userName = ref("独伤"); // Set default name or get from props
const loading = ref(false);
const finished = ref(true);
const redPackets = computed(() => redPacketList.value || []);
const redPacketList = ref([]);
const handleClose = () => {
  emit("update:modelValue", false);
};

const onLoad = () => {
  // Implement load more logic here if needed
  loading.value = false;
  finished.value = true;
};
watch(
  () => props.modelValue,
  async nv => {
    if (nv) {
      redPacketList.value = await getRedPacketList(liveDataStore.roomParams);
    }
  }
);
</script>

<style scoped>
.red-packet-list {
  max-height: 90vh;
  overflow-y: auto;
}
</style>
